<template>
  <el-dialog
    :title="$t('评价')"
    :visible.sync="centerDialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="true"
    :before-close="handleClose"
    append-to-body
    class="my-dialog__wrapper evaluate2-container"
    width="40%"
  >
    <div class="evaluate2-content">
      <div class="type-box">
        <p class="title" style="margin-bottom: 0; margin-right: 1rem">
          {{ $t("类型") }}
        </p>
        <el-radio v-model="radio" label="1">{{ $t("阶段反馈") }}</el-radio>
        <el-radio v-model="radio" label="2">{{ $t("结单评价") }}</el-radio>
      </div>
      <p class="title">{{ $t("复诊报告") }}</p>

      <el-upload
        :action="uploadUrl"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :file-list="imageUrl"
        :on-success="uploadSuccess"
      >
        <img src="@/assets/img/Vector@2x.png" alt="" />
      </el-upload>

      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
      <p class="title">{{ $t("评价内容") }}</p>
      <el-input
        type="textarea"
        rows="10"
        :placeholder="$t('请输入...')"
        v-model="content"
      ></el-input>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="centerDialogVisible = false">{{
        $t("取 消")
      }}</el-button>
      <el-button type="primary" v-loading="isLoading" @click="handleDone">{{
        $t("确 定")
      }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import api from "@/api/mission.js";
import api2 from "@/api/utils.js";
import myRate from "../../../components/my-rate.vue";
export default {
  components: {
    myRate,
  },
  data() {
    return {
      centerDialogVisible: false,
      isLoading: false,
      id: null,
      content: "",
      radio: "1",
      dialogVisible: false,
      dialogImageUrl: "",
      uploadUrl: this.$store.state.baseURL + api2.upload,
      imageUrl: [],
    };
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      let index = this.imageUrl.findIndex((c) => c.uid == file.uid);
      if (index > -1) {
        this.imageUrl.splice(index, 1);
      }
    },
    uploadSuccess(res, file, fileList) {
      this.imageUrl.push({ uid: file.uid, url: res.data });
    },
    openDialog(id) {
      this.id = id;
      this.content = "";
      this.radio = "1";
      this.dialogImageUrl = "";
      this.imageUrl = [];
      this.centerDialogVisible = true;
    },
    handleClose(done) {
      this.$confirm(this.$t("确认关闭？"))
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    async handleDone() {
      if (!this.content) {
        return this.$message.warning(this.$t("请输入内容"));
      }
      if (!this.imageUrl.length) {
        return this.$message.warning(this.$t("请上传图片"));
      }
      this.isLoading = true;
      // 出方案的专家
      let res = await this.$http.post(api.comment, {
        taskId: this.id,
        type: this.radio,
        content: this.content,
        imageUrl: this.imageUrl.map((c) => c.url).join(','),
      });
      this.isLoading = false;
      if (res && res.code == 0) {
        this.$message.success("提交成功");
        this.$emit("initPinjia",this.radio);
        this.centerDialogVisible = false;
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
  },
};
</script>
<style lang="scss">
.evaluate2-content {
  padding: 1rem 2rem;
  .title {
    font-size: 0.89rem;
    color: #666666;
    margin-bottom: 2rem;
  }
  .type-box {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
  }
  .el-textarea {
    font-size: 0.879rem;
  }
  .el-radio__label {
    font-size: 1rem;
  }
  .el-upload-list--picture-card {
    .el-upload-list__item {
      width: 6.39rem;
      height: 7.44rem;
    }
  }
  .el-upload--picture-card {
    width: 6.39rem;
    height: 7.44rem;
    background: #ebf6ff;
    border-radius: 0.11rem 0.11rem 0.11rem 0.11rem;
    border: 1px solid rgba(66, 95, 155, 0.15);
    line-height: 7.44rem;
    img {
      width: 1.41rem;
      height: 1.41rem;
    }
  }
}
</style>
